{% extends 'base/base.html' %}
{% load static %}

{% block title %}
    {{ title }}
{% endblock %}

{% block extcss %}
    <link rel="stylesheet" href="{% static 'index/css/swiper.min.css' %}">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

{% endblock %}
{% block extjs %}
    <script src="{% static 'index/js/index.js' %}"></script>
    <script src="{% static 'index/js/swiper.min.js' %}"></script>
{% endblock %}
{% block content %}
    <!--页头导航部分-->
    <div class="top_siteNav">
        <!--左侧分类及其展开-->
        <div class="main_sort">
            <!--头导航    --  导航全部分类-->
            <div class="main_sort_top">
                <a href="#" class="all_sort" style="color: white; font-family: 'microsoft yahei';font-size: 16px;">全部商品分类</a>
                <input type="text">
                <div class="sor_list">
                    <!--全部商品分类详情-->
                    <ul class="sor_item">
                        {% for oneInfo in caoyaoinfo %}
                            <li class="sor_item_box">
                                <a class="sib_abox" href="#"><i
                                        class="i-icon nor-{{ forloop.counter }}"></i>{{ oneInfo.kind }}</a>
                                <!--展开分类-->
                                <div class="item_box_list">
                                    <div class="item_box_bag"></div>
                                    <!--分类详情-->
                                    <div class="sort_detail_list">
                                        <dl>
                                            <dd>
                                                {% for onecaoyao in oneInfo.caoyao %}
                                                    <a href="/bbf/product_details/?id={{ onecaoyao.id }}">{{ onecaoyao.name }}</a>
                                                {% endfor %}

                                            </dd>
                                        </dl>
                                    </div>
                                    <!--推荐品牌-->
                                    <div class="sort_detail_right">
                                        <div class="rec_brank">
                                            <div class="rb_tit">推荐</div>
                                            <div class="b_brank">
                                                <a href="#"><img alt="鸡血藤" src="{% static 'base/img/jixueteng.jpg' %}"/></a>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </li>
                        {% endfor %}


                    </ul>
                </div>
            </div>
        </div>

        <form action="/bbf/search">
            <div class="main_nav">
                <div class="col-lg-12" style="margin-left: 650px;width: 250px">
                    <div class="input-group">
                        <input type="text" class="form-control" name="keyword" placeholder="搜索草药...">
                        <span class="input-group-btn">
        <button class="btn btn-default" type="submit">搜索</button>
      </span>
                    </div><!-- /input-group -->
                </div><!-- /.col-lg-6 -->
            </div>
        </form>

    </div>
    </div>
    <!--页头部分结束-->


    <!--页面主体部分开始-->
    <div id="main_wrap">
        <!--轮播图  开始-->
        <div class="swiper-container" id="baner_scoller">
            <ul id="barss" class="swiper-wrapper">
                {% for baner in baners %}
                    <li class="swiper-slide" style="background: {{ baner.backColor }};">
                        <a href=""><img src="{% static baner.img %}" alt="{{ baner.title }}"></a>
                    </li>
                {% endfor %}

            </ul>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>


        <!--轮播图底部推荐商品 开始-->
        <div class="main_sell_box">
            <ul class="ms_list">
                {% for bo in bottom %}
                    <li class="ms_list_item">
                        <a href="#" class="pd_name" title="{{ bp.name }}">{{ bo.name }}</a>
                        <p class="pd_desp" style="max-height: 50px;overflow: hidden;">{{ bo.jianjie }}</p>
                        <a class="pd_img" href="/bbf/product_details/?id={{ bo.id }}" title="{{ bo.name }}">
                            <img id="tz_pd" style="width: 230px" alt="{{ bo.name }}" src="{{ bo.images }}"/>
                        </a>
                    </li>
                {% endfor %}


            </ul>
        </div>
        <!--轮播图底部推荐商品 结束-->


    </div>
    <!--页面主体部分结束-->
{% endblock %}


